<template>
	<div id="AwakeBB">
		<div v-if="isOrder" style="margin: 15px;">
			<el-form :inline="true" :model="searchform" class="form" v-loading="searchLoading" style="padding-left: 10px;">
				<el-form-item label="">
					<el-input :size="btnsize" v-model="searchform.name" placeholder="名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button :size="btnsize" type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
			</el-form>
			<el-container class="outerContainer" v-if="spineList.length === 0">
				立绘召集中...
			</el-container>
			<el-row v-else>
				<el-col :span="attributesSpan" v-for="(item,index) in spineList" :key="item.id">
					<div v-on:click="getSpine(item)" class="outerContainer">
						{{ item.chineseName }}
					</div>
				</el-col>
			</el-row>
			<br/>
			<div class="block" v-if="isMobile">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize" :pager-count="5"
					layout="prev, pager, next" :total="total">
				</el-pagination>
			</div>
			<div class="block" v-else>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[20, 30, 40, 50, 60]" :page-size="pageSize" :pager-count="11"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		
		<el-button v-on:click="returnOrder" v-if="!isOrder" type="primary" icon="el-icon-back" plain>
		{{ item.chineseName }} 
		</el-button>
		<el-input v-if="!isOrder" :size="btnsize" v-model="bgcolor" @blur="setbgColor" placeholder="输入颜色代码, 如#000000代表黑色">
			<template slot="prepend">背景色</template>
		</el-input>
		<div id="player"></div>
	</div>
</template>

<script>
	import {
		yiyuziApi
	} from '@/api/yiyuziApi';

	export default {
		name: 'AwakeSinoAlice',
		components: {},
		data() {
			return {
				spineList: [],
				isOrder: true,
				attributesSpan: 6,
				isMobile: false,
				currentPage: 1,
				pageSize: 10,
				total: 0,
				searchform: {
					name: ''
				},
				thisSpine:[],
				updateLoading:false,
				searchLoading:false,
				item:{'chineseName':"","id":0},
				btnsize: "mini",
				bgcolor: "#000000",
			}
		},
		mounted() {
			this._isMobile();
			// this.getSpineList();
		},
		methods: {
			async getSpineList() {
				try {
					// this.searchLoading = true;
					let result = await yiyuziApi.getSpineList(this.currentPage, this.pageSize);
					this.spineList = result.data.data.list;
					this.total = result.data.data.total;
					// this.searchLoading = false;
				} catch (e) {
					console.error(e);
				}
			},

			getSpine(item) {
				let fatherId = item.id;
				this.isOrder = false;
				this.item = item;

				const atlas = yiyuziApi.getSpineUrl(fatherId, "atlas");
				const skel = yiyuziApi.getSpineUrl(fatherId, "skel");

				// document.getElementById("AwakeBB").appendChild();
				new spine.SpinePlayer("player", {
					skelUrl: skel,
					atlasUrl: atlas,
					animation: "idle",
					backgroundColor: this.bgcolor,
				})
			},
			
			removePlayer() {
				document.getElementById("player").innerHTML = "";
			},

			returnOrder() {
				this.isOrder = true;
				// 清空div内的子元素
				this.removePlayer();
			},
			
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getSpineList();
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getSpineList();
			},
			
			async onSearch() {
				try {
					let str = this.searchform.name.replace(/(^\s*)|(\s*$)/g, '');//去除空格;
					if (str != null && str != "" && str != undefined && str != "_"){
						this.searchLoading = true;
						let result = await yiyuziApi.getSpineListByNameAndPage("1", "300", str);
						this.spineList = result.data.data.list;
						this.total = result.data.data.total;
						this.currentPage = 1;
						this.searchLoading = false;
					} else {
						this.getSpineList();
					}
				} catch (e) {
					console.error(e);
				}
			},
			
			setbgColor() {
				let color = this.bgcolor;
				if (color != null && color != "" && color != undefined){
					var pattern = /^#[0-9a-fA-F]{6}$/;
					if(color.match(pattern) != null){
						this.removePlayer();
						this.getSpine(this.item);
					}else{
						this.bgcolor = null;
					}
				}
			},

			_isMobile() {
				this.isMobile = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				);
				this.pageSize = this.isMobile ? 10 : 40;
				this.attributesSpan = this.isMobile ? 24 : 6;
				this.btnsize = this.isMobile ? "mini" : "";
			}
		}
	}
</script>

<style scoped>
	#AwakeBB {
		
	}
	
	.outerContainer {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		color: #333;
		border-radius: 10px;
		padding: 5px;
		margin: 10px;
		margin-bottom: 10px;
		font-size: 2vh;
	}
	
	.outerContainer:hover {
		background-color: #409eff;
		color: #ffffff;
		cursor: pointer;
	}
	
</style>
